import { MoreActionButton, NameGradeCell } from '@/components'
import { ButtonConfig, SalaryFieldsMap, SalaryStatusMap } from '@/store/constant'
import { GridColDef } from '@mui/x-data-grid-pro'
import UpdateSalaryButton from './UpdateSalaryButton'
interface Options {
  refresh: () => void
}

const useColumns = ({ refresh }: Options) => {
  const columns: GridColDef[] = [
    {
      field: 'name_grade',
      headerName: '职级 + 用户名',
      width: 200,
      renderCell(params) {
        const { row } = params
        return <NameGradeCell row={row} copyKey="advisor_id" />
      }
    },
    {
      field: 'status',
      headerName: '状态',
      width: 120,
      renderCell(params) {
        const { row } = params
        const { label, color, icon: Icon } = get(SalaryStatusMap, [row.status])
        return <Chip size="small" variant="outlined" color={color} label={label} icon={<Icon size="1rem" />} />
      }
    },
    ...toPairs(SalaryFieldsMap)
      .map(([field, label]: string[]) => ({ label, field }))
      .concat({ label: '合计', field: 'in_all' })
      .map((v: { label: string; field: string }) => ({
        field: v.field,
        headerName: v.label,
        type: 'number',
        minWidth: 160
      })),
    {
      field: 'actions',
      headerName: '操作',
      width: 100,
      renderCell(params) {
        const { row } = params
        const { label, icon: Icon } = ButtonConfig.edit
        return (
          <MoreActionButton
            menuItems={[
              <UpdateSalaryButton
                key="edit"
                row={row}
                refresh={refresh}
                renderTrigger={(props) => (
                  <MenuItem {...props} key="period">
                    <ListItemIcon>
                      <Icon size="1.2rem" />
                    </ListItemIcon>
                    <ListItemText>{label}</ListItemText>
                  </MenuItem>
                )}
              />
            ]}
          />
        )
      }
    }
  ]
  return columns.map((v) => ({ ...v, headerAlign: 'center', align: 'center' })) as GridColDef[]
}

export default useColumns
